<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        .tab-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
        }

        .tab-list li {
            width: 120px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: yellowgreen;
        }

        .tab-list li.active {
            background: grey;
        }

        .content-item {
            padding: 0;
            margin: 0;
            width: 476px;
            height: 150px;
            border: 2px solid #ddd;
        }

    </style>
</head>
<body>
    <div id="app">
        <!-- 监听器 -->
        <!-- Object.defineedProperty ---- 监听器，对data中数据劫持 -->

        <!-- watch
        computed -->

        {{msg}}

        {{newMsg}}
    </div>

    <script src="js/vue.js"></script>

    <script>
        let myApp = new Vue({
            el:'#app',
            data:{
                msg:'这是测试内容',
                newMsg:'222',
                formData:{
                    name:'tom',
                    age:'11'
                }
            },
            watch:{
               //初始化

               // 当msg数据发生变化时，在msg的后面添加上一个随机数
               //watch监听，监听一个值，去修改其他值
               msg(newValue,oldValue){
                   console.log(newValue);
                   console.log(oldValue);
                   this.newMsg = newValue + Math.random()
               },
               //第二种
            //    msg:{
            //        handler(newValue,oldValue){
            //            console.log(newValue)
            //            console.log(oldValue)
            //            this.newMsg = newValue + Math.random()
            //        },
            //        //初始化执行监听器
            //        immediate:true
            //    },

            //    formData:{
            //        handler(newValue,oldValue){
            //            console.log(this.formData.age)
            //            console.log(oldValue.age)
            //        },
            //        //深度监听
            //        deep:true
            //    },

               'formData.name':{
                   handler(newValue,oldValue){
                        console.log(this.formData.name)
                        console.log('name属性变化，触发监听器')
                   }
               }
            },
            methods:{

            }
        })
    </script>
</body>
</html>